<template>
    <view class="padding20-30" :style="{background: pageData.bgColor, '--color': color}">
        <view v-if="!pageData.style">
            <view class="item bgwhite bor_radius_8 padding20 d-flex" v-for="(item,index) in list" :key="index"
                @click="toUrl('/pages/store/storeIndex?shop_id=' + item.shop_id)" :class="{'shadow': pageData.shadow, 'm-bot20': index != list.length - 1}">
                <image :src="$imgUrls(item.logo)" mode="aspectFill" class="img" :class="{'bor_radius': pageData.shape == 2}"></image>
                <view class="p-left20 flex-1">
                    <view class="d-flex a-center">
                        <view class="type h7 white thmeBg m-right10 f-shrink-0" v-if="item.bussName">{{ item.bussName }}</view>
                        <view class="size30 ellipsis">{{ item.name }}</view>
                    </view>
                    <view class="d-flex a-center m-top20">
                        <view class="d-flex a-center m-right20">
                            <u-rate :value="item.score" :minCount="0" activeColor="#FF632D" inactiveColor="#e6e5e4" inactiveIcon="star-fill" 
                                size="16" gutter="1" readonly allowHalf></u-rate>
                            <view class="score size28 bold p-left10" v-if="item.score && item.score != 0">{{ item.score }}</view>
                            <view class="h6 color_68 p-left10" v-else>暂无评分</view>
                            <!-- <view class="h6 color_68">{{ item.fPrice == 0 ? '免运费' : `运费￥${item.fPrice}` }}</view> -->
                            <!-- <view class="h6 color_68" v-if="item.favorable">好评{{ item.favorable }}%</view> -->
                        </view>
                        <view class="h6 color_68" v-if="item.sales_number">销量{{ item.sales_number }}</view>
                    </view>
                    <view class="d-flex j-sb color_68 m-top20" v-if="item.address">
                        <!-- align-items的默认值stretch会影响高度继而使省略号显示错误 -->
                        <view class="d-flex a-center flex-1">
                            <text class="iconfont icon-daohang m-right8"></text>
                            <text class="h6 ellipsis">{{ item.address }}</text>
                        </view>
                        <view class="h6 p-left10" v-if="item.distance">{{ item.distance }}</view>
                    </view>
                    <view class="d-flex a-center color_68 m-top20" v-if="item.runTime">
                        <text class="iconfont icon-bar_icon_shijian size26 m-left4 m-right8"></text>
                        <text class="h6">{{ item.runTime }}</text>
                    </view>
                </view>
            </view>
        </view>

        <view v-if="pageData.style == 1">
            <view class="item2 bgwhite bor_radius_20 padding20" v-for="(item,index) in list" :key="index"
                :class="{'shadow': pageData.shadow, 'm-bot20': index != list.length - 1}"
                @click="toUrl('/pages/store/storeIndex?shop_id=' + item.shop_id)">
                <view class="d-flex p-top10">
                    <image :src="$imgUrls(item.logo)" mode="aspectFill" class="logo bor_radius_20 bor_f2"></image>
                    <view class="flex-1 padding2-10">
                        <view class="size30 bold ellipsis m-bot10">{{ item.name }}</view>
                        <view class="h6 color_68 ellipsis" @click.stop="locate(item)">{{ item.address }}</view>
                    </view>
                    <view class="btn thmeBg flexac">
                        <text class="h6 white">进店</text>
                        <text class="iconfont icon-xiangyouxiayiye h7 white"></text>
                    </view>
                </view>
                <view class="d-flex m-top20">
                    <view class="type h7 m-right10">{{ item.goods_count }}款</view>
                    <view class="type h7 m-right10" v-if="item.bussName">{{ item.bussName }}</view>
                </view>
                <view class="list d-flex m-top20" v-if="item.goods && item.goods.length">
                    <view class="m-right10" v-for="(itm,idx) in item.goods" :key="idx" @click.stop="toGoods(itm.goods_id)">	
                        <image :src="$imgUrls(itm.img)" mode="aspectFill" class="img"></image>
                        <view class="padding10 d-flex a-center">
                            <view class="color_FOD m-right4">
                                <text>￥</text>
                                <text class="size28">{{ parseFloat(itm.price) }}</text>
                            </view>
                            <view class="color_99 line-through">￥{{ parseFloat(itm.full_price) }}</view>
                        </view>
                    </view>
                    <view class="img bgF2 flexac f-column f-shrink-0" v-if="item.goods.length < item.goods_count">
                        <text class="iconfont icon-cangpeitubiao_shangpin m-bot10"></text>
                        <view>更多商品</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
    props: ['pageData'],
    data() {
        return {
            list:[]
        }
    },
    computed: {
        ...mapState(['color'])
    },
    mounted() {
		this.getBlockInfo()
	},
    methods: {
        async getBlockInfo(){
            const result = await this.$getBlockInfo(this.pageData.list)
            this.list = result.list || []
        },
        locate(item){
            uni.openLocation({
                latitude: parseFloat(item.pointy),
                longitude: parseFloat(item.pointx),
                name: item.name,
                address: item.address,
                complete(res){
                    console.log(res)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.item  {
    .img {
        width: 160rpx;
        height: 160rpx;
    }
    .score {
        color: #dc1a20;
        line-height: 30rpx;
    }
    .type {
        width: fit-content;
        line-height: 32rpx;
        padding: 0 10rpx;     
        border-radius: 6rpx;
    }
}
.item2 {
    .logo {
        width: 80rpx;
        height: 80rpx;
    }
    .btn {
        width: 120rpx;
        height: 56rpx;
        border-radius: 6rpx;
    }
    .type {
        border: 1rpx solid var(--color);
        color: var(--color);
        padding: 0 6rpx;  
        border-radius: 10rpx;
    }
    .list {
        overflow-x: scroll;
        .img {
            width: 200rpx;
            height: 200rpx;
            border-radius: 20rpx;
        }
    }
}
.shadow {
    box-shadow: 0 4rpx 10rpx 2rpx rgba(105,105,105,0.1);
}
</style>